<template>
    <view class="content">
        <van-nav-bar title="售后历史" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" id="scroller"
            show-scrollbar="false" @scrolltolower="scrolltolower">
            <view class="wrapper">
                <view class="history_box">
                    <view class="order-list-container" style="position: relative; ">
                        <view class="history_bg" v-for="(item, val) in history" :key="val" >
                            <view class="history">                    
                                <view class="wraper_products_info">
                                    <!-- <view class="goodsPic">
                                        <img class="img" :src="item.imgUrl" mode="widthFix" />
                                    </view> -->
                                    <view class="goodsText">
                                        <view class="goodsTop"> {{item.historyStatusValue}} </view>
                                        <view class="goodsMiddle"> {{item.operationTime}}</view>               
                                    </view>
                                </view>                         
                                <view class="logistics">
                                    <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/logistics.png"
                                        alt="" style="width: 19px; height: 14px;"> -->
                                    <view class="logistics_status"> {{ item.historyStatusDesc?item.historyStatusDesc:'-' }}   </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <van-dialog id="van-dialog" confirm-button-color='#ff6203' />
    </view>
</template>
<script>

import Dialog from '@/wxcomponents/vant/dialog/dialog'
import {getAfterSalesOrderHistoryApi} from '@/api/order'

export default {

    props: {

    },
    components: {

    },
    data () {
        return {
            offsetTop:0,  // van-tab 吸顶的偏移量
            scrollTop:0,
            navBarTitle: '我的订单',
            navBarHeight: 0,  // navbar 的高度
            titleHeight:0 , //标题的高度
            wrapperStyle:0,
            scrolling: false, // 是否正在滚动
            loading:true,
            showMark: false, // 标记

            history: [
                // {
                //     orderStatus: '已撤销，退款关闭',
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     date: '2023-11-14 14:00:00',
                //     orderType:'goods',
                //     logistics: '预计明天送达自提点',
                //     description:'.....'
                // },
                // {
                //     orderNum: '343434343313188',
                //     orderStatus: '同意售后申请',
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     date: '2023-11-14 14:00:00',
                //     orderType:'service',
                //     logistics: '预计明天送达自提点',
                //     description: '预计明天送达自提点'
                // },
                // {
                //     orderNum: '343434343313132',
                //     orderStatus: '审核意见',
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     date: '2023-11-14 14:00:00',
                //     orderType:'goods',
                //     description: '快件已被本人签收 地址：滨湖一号运城快递...'
                // },
                // {
                //     orderNum: '343434343313133',
                //     orderStatus: '待付款',
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     date: '2023-11-14 14:00:00',
                //     orderType:'goods',
                //     description: '20+'
                // },
            ],
            select:true,
            // 待付款  复选框
            checked: [],
            checkAll: false, // 标记是否全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            isShowBlue: false,
            // handlePopup: false,
            popupContent: '这是气泡内容',
            records:[],//存所有的数据
            list: [],
            menuButtonWidth:'',
            searchRight:'',
            params:{},
            showPopover:'true',
            actions : [
                { text: '选项一' },
                { text: '选项二' },
                { text: '选项三' },
            ],
            orderStatus:-1,
            isPopupVisible: false,
            popoverShow: false,
            current: 0,
            bubbleTop: 0,
            bubbleLeft: 0,
            popupDisplay:'none',
            popupCurrent:-1,  //弹窗里面的选项
            cancelPopup:false, //取消订单原因弹窗
            cacheData: {}, // 新增缓存标记对象
            orderId:undefined,//订单id
            cancelParams:{},
            sourceType:'mine',
            // 新增分页参数
            currentPage: 1,
            pageSize: 10,
            totalPages: 0,
            hasMore: true,
            total:0,
            scrollTop: 0, // 新增：用于存储滚动位置
            params:{},
            afterSalesId:''
        }
    },

    computed: {},
    watch: {

    },
    computed: {

    },
    onLoad (data) { 
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            // this.activeTab=this.params.activeTab
            // this.showMark= this.activeTab===1
            // this.orderStatus = this.params.orderStatus
            this.afterSalesId=this.params.afterSalesId
        }
        this.getNavBarHeight()
        this.getTitleHeight()
    },
    onReady () {},
    onShow(){
        this.getAfterSalesOrderHistory(this.afterSalesId)
        // 在数据准备好后获取标题高度
        this.$nextTick(() => {
            this.getTitleHeight()
        })
    },

    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            // 监听滚动事件
            const scrollTop = e.detail.scrollTop;
            this.scrollTop = scrollTop; // 新增：更新滚动位置
            this.scrolling = scrollTop > 0; // 如果滚动距离大于 0，设置 scrolling 为 true
            if (scrollTop > 50) {
                this.offsetTop = this.navBarHeight;
            } else {
                this.offsetTop = 0;
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        scrolltolower() {

        },
        //navBar高度
        getNavBarHeight() {
            const query = wx.createSelectorQuery();
            query.select('#navBar').boundingClientRect((navRes) => {
                if (navRes) {
                    this.navBarHeight = navRes.height || 0;
                    this.offsetTop = navRes.height || 0; // 直接同步到吸顶位置
                    console.log(this.offsetTop,'offsetTop',this.navBarHeight)
                   
                }
            }).exec();
           
        },
        getTitleHeight() {
            const query = wx.createSelectorQuery();
            query.select('#cartAdTitle').boundingClientRect((res) => {
                if (res) {
                    this.titleHeight = res.height;
                    console.log(this.titleHeight,'titleHeight')
                }
            }).exec();
        },

        // 继续逛逛
        lookAroundBtn () {
            const params = {}
            params.biaoshi = 'order'
            wx.switchTab({ url: '/pages/surprise/index' })
        },

        getAfterSalesOrderHistory(afterSalesId){
            getAfterSalesOrderHistoryApi(afterSalesId).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.history=res.data
                }
            })
        }

    }

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    height: 100vh;
    // padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
}

.scroll-content {
    flex: 1;
    height: 1px;
}

// 没有订单的样式
.noOrderwrapper {
    padding: 50px 24px;
}

.noOrderPic {
    width: 100%;
    text-align: center;

    img {
        width: 81px;
        height: 85px;
    }
}


.orderTip {
    font-weight: bolder;
    font-size: 40rpx;
    text-align: center;
    color: #111111;
}

.description {
    margin-top: 20px;
    text-align: center;
    color: #d4d4d4;
    font-size: 24rpx;
    text-align: center;
}

.noOrderBtn-area {
    padding-top: 100px;

    button[plain] {
        border: none;
    }

    .checkBtn {
        background-color: #FF6203;
        // border: none;
        border-radius: 38px;
        font-size: 28rpx;
        text-align: center;
        color: #FFFFFF;
        height: 76rpx;
        line-height: 74rpx;
        width: 100%;
    }
}



.wrapper {
    height: 100%;
    .cartAd_title {
        padding: 10px 24px 10px 24px;
        font-size: 60rpx;
        text-align: left;
        line-height: 60rpx;
        color: #111111;
    }
}


.history_box {
    background-color: #ffffff;
    height: 100vh;
}
.history_bg{
    background:#f9f9f9;
    padding-bottom:1rpx;
}
.history {
    padding: 24px 24px 15px 24px;
    background-color: #ffffff;
    width: calc(100% - 48px);

    // 待付款
    .orderTop {
        display: flex;
        align-items: center;
    }

    // 有复选框  右侧商品的样式
    .orderTopRight {
        width: 100%;
    }

    // 已付款
    .listTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .listTopLeft {
            font-size: 26rpx;
            color: #666666;
            line-height: 26rpx;
            text-align: left;
        }

        .listTopRight {
            color: #FF6203;
            text-align: right;
            line-height: 26rpx;
            font-size: 26rpx;
        }
    }

    .goodsDetail {
        margin-top: 11px;
        width: 100%;

        .wraper_left {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 11px;
        }

        .wraper_left:last-child {
            margin-bottom: 0px;
        }

        .wraper_products_info {
            display: flex;
        }

        // .goodsPic {
        //     width: 20%;
        //     display: flex;
        //     flex-direction: column;
        //     justify-content: center;
        //     align-items: center;

        //     img {
        //         width: 100%;
        //         height: auto;
        //     }
        // }

        // .goods_tips {
        //     margin-top: 6px;
        //     font-size: 22rpx;
        //     text-align: left;
        //     color: #888888;
        //     line-height: 22rpx;
        // }


    }

    .goodsText {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        justify-content: space-around;

        .goodsTop {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            font-size: 38rpx;
            text-align: left;
            color: #333;
        }

        .goodsMiddle {
            width: 100%;
            margin-top: 16rpx;
            font-weight: 400;
            font-size: 24rpx;
            text-align: left;
            color: #999;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

    }
    // 物流
    .logistics {
        // background: #f9f9f9;
        // display: flex;
        // align-items: center;
        // padding-left: 10px;
        // padding-top: 10px;
        // padding-bottom: 10px;
        margin-top: 32rpx;

        .logistics_status {
            font-weight: 400;
            font-size: 32rpx;
            text-align: left;
            color: #666;
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }
    }
}


::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

#navBar{
    z-index: 1000;
    position: relative;
    background: white;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.loading-more {
    padding: 20rpx;
    text-align: center;
    color: #999;
    font-size: 24rpx;
}
::v-deep .van-icon {
    color: #242629 !important;
}

// 文字不用...
::v-deep .van-ellipsis {
    text-overflow: initial !important;
    overflow: auto;
    flex: auto;

}

::v-deep .van-tab {
    z-index: 999;
    font-size: 30rpx !important;
}

::v-deep .van-tab--active {
    // color: #333333 !important;
    font-size: 32rpx !important;
    font-weight: bolder !important;
}

::v-deep .van-button--danger, .van-button--normal, .van-goods-action-button__inner {
    font-weight: normal !important;
}


.r12 {
    margin-right: 12px;
}

.pb {
    padding-bottom: 50px;
}


.mt10{
    margin-top: 10rpx;
}

</style>
